<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <!-- 初始扫码页 -->
    <view v-if="pageState === 'scan'" class="scan-page">
      <image src="/static/saoma.png" class="scan-icon" @click="startScan" />
      <text class="hint" @click="startScan"></text>
    </view>
	
    <!-- 订单信息页 -->
    <view v-if="pageState !== 'scan'" class="order-page">
      <!-- 顶部订单信息卡片 -->
      <view class="order-summary-card">
        <view class="store-info" v-if="orderData.shop.shopname">
          <text class="store-name">店铺名称：{{ orderData.shop.shopname }}</text>
        </view>
        
        <view class="info-row">
          <text class="label">订单编号：</text>
          <text class="value">{{ orderData.order_no }}</text>
        </view>
        
        <view class="info-row">
          <text class="label">运单号：</text>
          <text class="value">{{ orderData.express_no }}</text>
        </view>
		
        <view class="info-row">
          <text class="label">快递公司：</text>
          <text class="value">{{ orderData.express_name }}</text>
        </view>
        
        <view class="info-row">
          <text class="label">订单金额：</text>
          <text class="price">¥{{ orderData.actual_payment }}</text>
        </view>
		<view class="info-row">
		  <text class="label">出库地：</text>
		  <text class="price">{{ orderData.address }}</text>
		</view>
      </view>
      
      <!-- 商品列表 -->
      <scroll-view class="product-list" scroll-y>
        <view v-for="(item, index) in orderData.goodsList" :key="index" class="product-item">
          <image :src="url+item.image" class="product-image" mode="aspectFill" />
          <view class="product-info">
            <text class="product-title">{{ item.title }}</text>
            <view class="product-details">
              <text class="product-quantity">数量：{{ item.number }}</text>
              <text class="product-price">{{ item.price }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
	  
	 <!-- <view class="address-card">
	    <view class="info-row">
	      <text class="label">出库地址：</text>
	      <input 
	        v-model="addressInfo" 
	        placeholder="请输入详细地址" 
	        class="address-input"
	      />
	    </view>
	  </view> -->
      
      <!-- 出库按钮 -->
      <button class="outbound-btn" @click="openAddressForm">出库</button>
    </view>

    <!-- 出库地址表单 -->

  </view>
</template>

<script>

export default {
  data() {
    return {
      // 页面状态管理 (scan/order/address)
      pageState: 'scan',
      
      // 订单数据
       orderData: {
              order_no: '',
              express_no: '',
              express_name: '',
              actual_payment: 0,
              storeName: '',
			  type:'',
              goodsList: [
                {
                  image: '/static/default-product.jpg',
                  title: '商品标题示例',
                  quantity: 1,
                  price: 0
                }
              ]
            },
      url:'https://shop.happygomall.cn/',
      // 出库地址
      addressInfo: ''
    }
  },
  onShow() {
   uni.getStorage({
       key: 'kuaidi_code',
       success: (res) => {
		   this.fetchOrderData(res.data);
		   alert(res.data);
       }
   });
  },
  methods: {
    // 开始扫码
    async startScan() {
		uni.navigateTo({
		    url: '/pages/index/qrcode'
		});
		// var barcode= '9807407625452';
		// this.fetchOrderData(barcode);
    },
    // 获取订单数据
    async fetchOrderData(barcode) {
      uni.showLoading({ title: '加载中...', mask: true });
	  uni.removeStorageSync('kuaidi_code');
      try {
        const res = await uni.request({
          url: this.url+'/api/wanlshop/order/orderQuery',
          method: 'POST',
          data: {express_no:barcode }
        });
        if(res.data.code === 1) {
          // Vue2中使用Object.assign更新响应式对象
          Object.assign(this.orderData, res.data.data.orderInfo);
		  Object.assign(this.orderData.goodsList,res.data.data.goods);
          this.pageState = 'order'; // 切换到订单页
		  this.type = res.data.data.orderInfo.type;
        }else{
			uni.showToast({
			  title: '订单查询失败',
			  icon: 'none'
			});
		}
      } catch (e) {
        uni.showToast({
          title: '订单查询失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    
    // 打开出库表单
    openAddressForm() {
      uni.showModal({
        title: '确认出库',
        content: '请确认出库信息是否正确',
        success: async (res) => {
          if(res.confirm) {
            await this.submitOutboundRequest();
          }
        }
      });
    },
    // 提交出库请求
    async submitOutboundRequest() {
      uni.showLoading({ title: '出库处理中...' });
      
      try {
      const res =  await uni.request({
          url: this.url+'/api/wanlshop/order/outbound',
          method: 'POST',
          data: {
            orderId: this.orderData.id,
            type: this.type
          }
        });
		if(res.data.code === 0){
			uni.showToast({
			  title: '出库失败: ' + res.data.msg,
			  icon: 'none'
			});
			return;
		}
        uni.showToast({ title: '出库成功！' });
        this.resetPage(); // 重置页面状态
      } catch (e) {
        uni.showToast({
          title: '出库失败: ' + e.message,
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    
    // 重置页面
    resetPage() {
      this.addressInfo = '';
      this.pageState = 'scan';
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.scan-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  
  .scan-icon {
    width: 800rpx;
    height: 800rpx;
    margin-bottom: 40rpx;
  }
  
  .hint {
    font-size: 32rpx;
    color: #666;
  }
}

/* 统一卡片样式 */
.order-summary-card, 
.product-list {
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
  background: #fff;
  flex: 1;
    max-height: 50vh; /* 限制高度防止表单被推出屏幕 */
    overflow-y: auto;
    padding: 0;
}

.order-summary-card {
  .store-info {
    margin-bottom: 25rpx;
    .store-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .info-row {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 30rpx;
    
    .label {
      color: #999;
      width: 160rpx;
    }
    
    .value {
      flex: 1;
      color: #333;
    }
    
    .price {
      color: #e54d42;
      font-weight: bold;
    }
  }
}

.product-list {
  flex: 1;
  padding: 0; /* 移除左右内边距 */
  
  .product-item {
    display: flex;
    padding: 25rpx 30rpx; /* 统一内边距 */
    border-bottom: 1rpx solid #eee;
    
    .product-image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 8rpx;
      margin-right: 25rpx;
      background-color: #f8f8f8;
    }
    
    .product-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .product-title {
        font-size: 30rpx;
        color: #333;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .product-details {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        
        .product-quantity {
          font-size: 28rpx;
          color: #666;
          flex: 1; /* 数量占据更多空间 */
        }
        
        .product-price {
          font-size: 30rpx;
          color: #e54d42;
          font-weight: bold;
          margin-right: 20rpx; /* 右侧留出空间 */
        }
      }
    }
  }
  
  .product-item:last-child {
    border-bottom: none;
  }
}

.outbound-btn {
  margin-top: 20rpx;
  background: #2979ff;
  color: white;
  border-radius: 50rpx;
}

.address-form {
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  
  .confirm-btn {
    margin-top: 40rpx;
    background: #19be6b;
    color: white;
    border-radius: 50rpx;
  }
}
/* 添加以下样式 */
.address-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
}

.address-input {
  flex: 1;
  color: #333;
  font-size: 30rpx;
  padding: 0;
  border: none;
  outline: none;
}

/* 修改按钮位置和样式 */
.outbound-btn {
  margin-top: 20rpx;
  background: #2979ff;
  color: white;
  border-radius: 50rpx;
  width: 100%;
}

</style>